<template>
	<div class="addColumn w944">
		<alert ref="alert"></alert>
		<div class="label_top">
			<p><i class="line"></i>{{updateTitle}}</p>
		</div>
		<div class="addCont">
			<div class="addName marB"><span>一级栏目名称：</span>
				<el-input placeholder="请输入栏目名称" v-model="columnName" data-type="courseName"></el-input>
			</div>
			<div class="addSubVideo marB">
				<span>APP首页图标：</span>
				<div class="updownvideo">
					<el-upload class="avatar-uploader" refs="uploadxls" action="http://www.h3clearning.com/huathree-back/uploadFile" :headers="myHeaders" :show-file-list="false" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
						<img v-if="columnIconUrl" :src="columnIconUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"><b style="display:block;font-weight:normal"><em>上传图片</em></b></i>
					</el-upload>
					<em class="rules">建议尺寸为320*180像素，大小小于2M</em>
				</div>
			</div>
			<div class="addSubVideo marB">
				<span>APP分类图标：</span>
				<div class="updownvideo">
					<el-upload class="avatar-uploader" refs="uploadxls" action="http://www.h3clearning.com/huathree-back/uploadFile" :headers="myHeaders":show-file-list="false" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess2">
						<img v-if="columnIconUrl2" :src="columnIconUrl2" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"><b style="display:block;font-weight:normal"><em>上传图片</em></b></i>
					</el-upload>
					<em class="rules">建议尺寸为320*180像素，大小小于2M</em>
				</div>
			</div>
			<div class="addSubTuijian marB">
				<span>栏目属性：</span>
				<el-select v-model="columnType" placeholder="请选择栏目属性">
					<el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</div>
			<div class="addSubTuijian marB">
				<span>首页推荐：</span>
				<el-select v-model="columnRecommend" placeholder="请选择">
					<el-option v-for="item in optionsub" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</div>
			<div class="addName marB"><span>排序：</span>
				<el-input v-model="columnIndex"></el-input>
			</div>
			<div class="addswitch"><span style="width: 112px;display: inline-block; text-align: right;">状态：</span>
				<el-switch v-show="stateFlag" class="switchStyle" v-model="visibleState" active-color="#44cef6" inactive-color="#999" active-text="开启" inactive-text="关闭" :active-value="1" :inactive-value="0"></el-switch>
			</div>
		</div>
		<div class="footerButton">
			<a @click="checkSave" v-bind:style="{background: clickLock==true ? '#44CEF6' : '#3a8ee6'}">保存</a>
			<a @click="cancel" class="cancel">取消</a>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	export default {
		data() {
			return {
				//数据绑定start
				id:'',
				clickLock:true,
				columnLevel:1,
				columnParentId:0,
				columnName:'',
				columnIconUrl:'',
				columnIconUrl2:'',
				columnType:'',
				columnRecommend:'',
				columnIndex:'',
				visibleState:'',
				stateFlag:false,
				//数据绑定end
				//上傳圖片start
				dialogImageUrl: '',
				dialogVisible: false,
				disabled: false,
				//上傳圖片end
				imageUrl: '',
				values: '',
				switchValue: true,
				option: [{
					value: 1,
					label: '课程类型'
				}, {
					value: 2,
					label: '资讯类型'
				},{
					value: 3,
					label: '大咖讲坛'
				}, {
					value: 4,
					label: '学习排行'
				}, {
					value: 5,
					label: '直播'
				}, {
					value: 6,
					label: '知识地图'
				}],
				updateTitle: '添加栏目',
				optionsub: [{
					value: 0,
					label: '否'
				}, {
					value: 1,
					label: '是'
				}],
				nowType:'add',
				myHeaders:{Authorization:this.$root.userInfoMsg.sessionId}
			}
		},
		methods: {
			getParams() {
				var routerParams = this.$route.params.type;
				if(routerParams == 'edit') {
					this.nowType = 'edit';
				} else {
					this.nowType = 'add';
					this.stateFlag=true;
				}
			},
			addColumn() {
				let s = {
					rootcompanyid:1,
					columnLevel: this.columnLevel,
					columnParentId: this.columnParentId,
					columnName:this.columnName,
					columnIconUrl: this.columnIconUrl,
					columnIconUrlCategory: this.columnIconUrl2,
					columnType: this.columnType,
					columnRecommend: this.columnRecommend,
					columnIndex: this.columnIndex,
					visibleState: this.visibleState,
				};
				if(this.clickLock==true){
					this.clickLock=false;
					this.$ajax({
						url: this.$root.jifuUrl +'/mns/kcColumn/addKcColumn',
						headers:{'ContentType': 'application/json; charset=utf-8'},
						data: s,
						method: 'POST',
						success: res => {
							if(res.data.code == 200) {
								this.$refs.alert.show({alertText: '保存成功',alertSubmit: function(){alertStatus: 0}});
								setTimeout(() =>{
									this.$router.push({
										name:'column'
									});
								},2000)
							}else{
								this.clickLock=true
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}
			},
			editColumn() {
				let s = {
					id: this.id,
					rootcompanyid:1,
					columnLevel: this.columnLevel,
					columnParentId: this.columnParentId,
					columnName:this.columnName,
					columnIconUrl: this.columnIconUrl,
					columnIconUrlCategory: this.columnIconUrl2,
					columnType: this.columnType,
					columnRecommend: this.columnRecommend,
					columnIndex: this.columnIndex,
					visibleState: this.visibleState,
				};
				this.$ajax({
					url: this.$root.jifuUrl +'/mns/kcColumn/updateKcColumn',
					headers:{'ContentType': 'application/json; charset=utf-8'},
					data: s,
					method: 'PUT',
					success: res => {
						if(res.data.code == 200) {
							this.$refs.alert.show({alertText: '保存成功',alertSubmit:function(){alertStatus: 0}});
							setTimeout(() =>{
								this.$router.push({
									name:'column'
								});
							},2000)
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();	
						}
					}
				});
			},
			checkSave() {
				if(this.nowType == 'add') {
					this.addColumn();
				}else if(this.nowType == 'edit') {
					this.editColumn();
				}
			},
			handleAvatarSuccess(res, file) {
				if(res.code == 200) {
					this.columnIconUrl = res.data[0];
				};
			},
			handleAvatarSuccess2(res, file) {
				if(res.code == 200) {
					this.columnIconUrl2 = res.data[0];
				};
			},
			beforeAvatarUpload(file) {
				const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png');
				const isLt2M = file.size / 1024 / 1024 < 2;
				if(!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			cancel(){
				this.$router.go(-1);
			}
		},
		components:{
			alert
		},
		mounted() {
			this.getParams();
			if(this.nowType == "edit") {
				console.log('306', this.nowType, this.$root.columnMsg);
				this.id=this.$root.columnMsg.id;   
				this.columnLevel=this.$root.columnMsg.columnLevel;  
				this.columnParentId=this.$root.columnMsg.columnParentId;  
				this.columnName=this.$root.columnMsg.columnName;  
				this.columnIconUrl=this.$root.columnMsg.columnIconUrl;  
				this.columnIconUrl2=this.$root.columnMsg.columnIconUrlCategory;  
				this.columnType =this.$root.columnMsg.columnType;  
				this.columnRecommend=this.$root.columnMsg.columnRecommend;  
				this.columnIndex=this.$root.columnMsg.columnIndex;  
				this.stateFlag=true;
				this.visibleState=this.$root.columnMsg.visibleState;  			
			}
		}
	}
</script>

<style>
	.addColumn {padding-bottom:100px}
	.addColumn .updownvideo {position:absolute;top:0;left:117px;}
	.addColumn .addSubVideolist .updownvideo,.addColumn .addSubVideolist .avatar-uploader,.addColumn .addSubVideolist .avatar-uploader .el-upload,.addColumn .addSubVideolist .avatar-uploader-icon {width:170px;height:84px;}
	.addColumn .el-button--primary.is-active,.addColumn .el-button--primary:active {background:#44CEF6;border:none}
	.addColumn .el-button--small,.addColumn .el-button--small.is-round {padding:0;}
	.addColumn .upload-demo span {border:none;font-size:14px!important;color:#fff!important;}
	.addColumn .upload-demo .el-button {border:none;}
	.addColumn .addSubVideo,.addSubVideolist {height:94px!important;position:relative;}
	.addColumn .el-upload-list {position:absolute;top:0;left:126px;}
	.addColumn .el-upload-list__item-name {font-size:14px;color:#333;}
	.addColumn .el-upload-list__item:first-child {margin-top:5px;}
	.addColumn .addCont a {background:#44CEF6;height:33px;line-height:33px;width:100px;display:inline-block;padding:0;border:0;margin-top:135px;}
	.addColumn .addCont a:hover {background:#31c7f2;}
	.addColumn .el-select input[type="text"] {height:34px!important;width:155px;}
	.addColumn .el-input__icon {line-height:35px;}
	.addColumn .avatar-uploader {height:70px!important}
	.addColumn .avatar-uploader .el-upload {border-radius:6px;cursor:pointer;position:relative;overflow:hidden;width:125px;height:70px;}
	.addColumn .avatar-uploader .el-upload:hover {border-color:#409EFF;}
	.addColumn .avatar-uploader-icon {font-size:28px;color:#8c939d;width:125px;height:60px;/*line-height:70px;*/text-align:center;background:#f2f2f2;padding-top:10px;}
	.addColumn .avatar {width:125px;height:70px;display:block;}
	.addColumn .addName span,.addColumn .addSubVideo span,.addColumn .addSubVideo span,.addColumn .addSubVideolist span,.addColumn .addSubTuijian span,.addColumn .addSubJieshao span {width:112px;display:inline-block;text-align:right;}
	.addColumn .addSubTuijian .el-select span {width:153px!important}
	.addColumn .addSubVideo span,.addSubVideolist span {position:absolute;top:0;left:0;}
	.addColumn .addName .el-input,.addColumn .addName .el-input input {width:157px;height:34px;display:inline-block;font-size:14px;color:#333;}
	.addColumn .addName.from .el-input,.addColumn .addName.from .el-input input {width:146px;}
	.addColumn span {font-size:16px;color:#333;}
	.addColumn .updownvideo em {font-style:normal;font-size:14px;color:#ccc;margin-top:8px;display:block;line-height:16px;}
	.addName .el-input input {width:157px!important;}
	.el-upload--picture-card {width:125px;height:70px;line-height:70px;background:#f2f2f2;border:0;}
	.el-upload--picture-card i {margin-top:10px;}
	.updownvideo .rules {font-size:12px!important;color:#ccc;}
</style>